<div *ngIf="!loading; then projectsPart;else loadingPart"></div>
<ng-template #projectsPart>
    <div class="projectList">
        <div class="scrollingContent">
            <div class="paddingContent">
                <div class="viewContent">
                    <div class="ui grid">
                        <div class="eight wide column">
                            <h1 translate="project_list"></h1>
                        </div>
                        <div class="eight wide column" *ngIf="projects && projects.length > 0">
                            <div class="floated right">
                                <app-input-autofocus [(model)]="filter"></app-input-autofocus>
                            </div>
                        </div>
                    </div>
                    <div *ngIf="projects && projects.length > 0;then projectslist;else noprojectslist"></div>
                    <ng-template #projectslist>
                        <div class="ui stackable four cards">
                            <a [routerLink]="['/project', proj.key]" class="ui link card" *ngFor="let proj of filteredProjects">
                                <div class="content">
                                    <img *ngIf="proj.icon" class="right floated mini ui image" [src]="proj.icon">
                                    <div class="header" [innerText]="proj.name"></div>
                                    <div class="meta" *ngIf="proj.description">
                                        <span [innerText]="proj.description.slice(0, 90)"></span><span *ngIf="proj.description.length > 90">...</span>
                                    </div>
                                    <div class="meta" *ngIf="!proj.description" [innerText]="'common_no_description' | translate"></div>
                                </div>
                            </a>
                        </div>
                    </ng-template>
                    <ng-template #noprojectslist>
                        <span translate="project_no"></span>
                    </ng-template>
                </div>
            </div>
        </div>
    </div>
</ng-template>
<ng-template #loadingPart>
    <div class="ui text active loader" translate="common_loading_projects"></div>
</ng-template>
